<ts-datepicker #datepicker="tsDatepicker" [(ngModel)]="date" [color]="global.params.color"></ts-datepicker>
<ts-timepicker #timepicker="tsTimepicker" [(ngModel)]="time" [color]="global.params.color"></ts-timepicker>

<div class="toolbar">
    <h4>日期选择</h4>
    <p class="text-muted">日期选择与时间选择可以快速得到一个格式化好的日期/时间字符串</p>
</div>
<div class="p-2">
    <div class="card mb-2">
        <div class="card-header border-bottom">
            组件参数
        </div>
        <div class="card-body">
            <form class="form-inline">
                <div class="input-group mb-3">
                    <input [value]="date" tsToggle [target]="datepicker" [bind]="datepicker" type="text" class="form-control bg-white pointer" placeholder="请选择日期" readonly>
                    <div class="input-group-append">
                        <button class="btn btn-white" type="button" tsToggle [target]="datepicker">
                            <i class="iconfont icon-calendar"></i>
                        </button>
                    </div>
                </div>
                <div class="input-group ml-2 mb-3">
                    <input [value]="time" tsToggle [target]="timepicker" [bind]="timepicker" type="text" class="form-control bg-white pointer" placeholder="请选择时间" readonly>
                    <div class="input-group-append">
                        <button class="btn btn-white" type="button" tsToggle [target]="timepicker">
                            <i class="iconfont icon-clock"></i>
                        </button>
                    </div>
                </div>
            </form>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">属性名称</th>
                        <th scope="col">类型</th>
                        <th scope="col">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">color</th>
                        <td>
                            <code>string</code>
                        </td>
                        <td>颜色设置，bootstrap的基础颜色[danger,light,info...]</td>
                    </tr>
                    <tr>
                        <th scope="row">ngModel</th>
                        <td>
                            <code>string</code>
                        </td>
                        <td>日期值，支持双向绑定，格式最好为 年/月/日,注意在safari浏览器中有些格式不支持</td>
                    </tr>
                    <tr>
                        <th scope="row">weekTitles</th>
                        <td>
                            <code>string[]</code>
                        </td>
                        <td>日历的星期标题，为一个字符串数组，从周一到周日</td>
                    </tr>
                    <tr>
                        <th scope="row">monthTitles</th>
                        <td>
                            <code>string[]</code>
                        </td>
                        <td>日历的月份标题，为一个字符串数组，从一月到十二月</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card mb-2">
        <div class="card-header border-bottom">
            导入日期模块
        </div>
        <div class="card-body">
            <ts-prism [code]="codes[0]" language="typescript"></ts-prism>
        </div>
    </div>
    <div class="card">
        <ts-tabs [tabs]="['example.html','example.ts']" [color]="global.params.color" [target]="tsTabsOne" activeTab="example.html"></ts-tabs>
        <div #tsTabsOne='tsTabs' tsTabs>
            <div class="card-body">
                <div tsTab tab='example.html'>
                    <ts-prism [code]="codes[1]" language="html"></ts-prism>
                </div>
                <div tsTab tab='example.ts'>
                    <ts-prism [code]="codes[2]" language="typescript"></ts-prism>
                </div>
            </div>
        </div>
    </div>
</div>